<template>
    <div class="message_board">
        <el-form ref="form" :model="form" :rules="rules1" label-width="55px" style="margin-top: 10px;">
                <div v-for="(item,index) in board" :class="index !==0 ? 'text_line': ''" :key="index">
                    <span class="close_button" v-if="index !== 0" @click="closeItem(index)">
                       <i class="el-icon-close"></i>
                     </span>
                    <div v-if="index !== 0" class="message">留言{{index+1}}</div>
                    <el-form-item label="留言" label-width="55px" :rules="rules1">
                    <el-input type="textarea" v-model="item.desc"></el-input>
                    <el-button class="add" v-if="index == 0" @click="addFn">增加</el-button>
                </el-form-item>
                </div>
        </el-form>
    </div>
</template>

<script>
/**
* description: 留言板模块
*/

export default {
    data() {
        return {
            form:{},
            rules1:{},
            board:[{
                desc:''
            }]
        }
    },
    methods: {
        addFn() {
            this.board.push({
                desc:''
            })
        },
        closeItem(index) {
            this.board.splice(index, 1)
        },
        submit() {
            return { formData: {...this.board} }
        }
    }
}
</script>

<style lang="scss" scoped>
.message_board{
    margin-left: 44px;
    padding-bottom: 100px;
}
.text_line{
    width: 668px;
    border: 1px dotted #D3D8E1;
    margin-bottom: 10px;
}
.close_button {
    float: right;
    position: relative;
    top: 8px;
    right: 10px;
    font-size: 20px;
}
.message{
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #999;
    margin: 10px 0 22px 55px;
}
// ::v-deep .el-textarea__inner {
//     width:57%;
//     height: 100px;
//     background: #FFFFFF;
//     border-radius: 2px;
//     border: 1px solid #D3D8E1;
//     resize: none;
// }
.add {
    width: 60px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid #00B3A8;
    margin-left: 20px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #00B3A8;
    position: absolute;
    bottom: 0;
}
</style>